<template>
    <el-upload
        :data="data"
        :action="action||href"
        :multiple="multiple"
        :limit="limit||3"
        :on-exceed="handleExceed"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-change="handleChange"
        :file-list="fileList1"
        :accept="accept"
        :list-type="listType"
        :show-file-list="showFileList"
        :drag="drag">
        <div v-if="drag">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <slot name="tip">
                <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </slot>
        </div>
        <div v-else>
            <slot name="trigger">
                <el-button type="primary" :size="size">选择文件</el-button>
            </slot>
            <!-- <slot name="tip">
                <span class="tip" :class="size" v-if="fileList.length<1">未选择任何文件</span>
            </slot> -->
        </div>
        <slot></slot>
    </el-upload>
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        name: '',
        props: ['action', 'size', 'multiple', 'limit', 'accept', 'listType', 'drag', 'fileList', 'badge', 'showFileList', 'data'],
        data() {
            return {
                fileList1: [],
                href: 'http://192.168.1.95:50013/file/upload'
            }
        },
        computed: {
            ...mapGetters([
                'user'
            ])
        },
        watch: {
            fileList(val) {
                this.init(val)
            }
        },
        mounted() {
            if (this.user) this.href = this.user.uploadUrl
            if (this.fileList) this.init(this.fileList)
        },
        methods: {
            init(val) {
                this.fileList1 = val.map(item => {
                    if (item.fileName) item.name = item.fileName
                    if (item.path) item.url = item.path
                    if (item.fileSize) item.size = item.fileSize
                    if (item.createTime) item.date = item.createTime
                    return item
                })
            },
            handleSuccess(response, file, fileList) {
                if (response.success) {
                    this.$emit('update:fileList', this.initFileList(file, fileList))
                }
                this.$emit('success', file, response)
            },
            handleRemove(file, fileList) {
                this.$emit('update:fileList', this.initFileList(file, fileList))
            },
            handleChange(file, fileList) {
                // if (file.status === 'ready') {
                //     if (file.size / 1000000 < 5) return true
                // }
                this.$emit('change', file, this.initFileList(file, fileList), this.badge)
            },
            handleExceed(files, fileList) {
                this.$message.warning({
                    message: `当前限制选择 ${this.limit || 3} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
                    showClose: true
                })
            },
            beforeRemove(file, fileList) {
                return new Promise((resolve, reject) => {
                    this.$confirm(`确定移除 ${file.name}？`, '提示').then(function () {
                        resolve(file, fileList)
                    }).catch(function (err) {
                        reject(err)
                    })
                })
            },
            handleError(file, fileList) {
                this.$message.warning({
                    message: '文件上传失败',
                    showClose: true
                })
                this.$emit('error')
            },
            initFileList(file, fileList) {
                let array = []
                if (fileList.length > 0) {
                    fileList.forEach((item, index) => {
                        array.push({
                            id: (item && item.id) || (item.response ? (item.response.data && item.response.data.id) : ''),
                            size: item.size,
                            name: item.name,
                            uid: item.uid,
                            status: item.status || 'success',
                            type: item.type || (item.raw ? (item.raw && item.raw.type) : null),
                            url: item.response ? (item.response.data && item.response.data.path) : item.url,
                            date: item.date || this.$filter.timeFormat(new Date(), 'YYYY.MM.DD hh:mm:ss')
                        })
                    })
                }
                return array
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .tip {
        margin-left: .2rem;
        font-size: .16rem;
    }
</style>
